<template>
  <div class="box1">
     <h4>基础用法</h4>
     <div class="input">
       <qr-input placeholder="请输入用户名" v-model="input"></qr-input>
     </div>
     <div class="show">
      <span @click='ShowMsg'>{{msg}}</span>
     <div class="markdown-body" v-show="isShow" >
       <input1-md></input1-md>
     </div>
     </div>  
  </div>
</template>

<script>
import Input1Md from '@/markdown/Input/input1.md'
export default {
 name: 'Input4',
 components: {
   Input1Md
 },
 data() {
    return {
      isShow: true,
      msg: '隐藏代码',
      input: 'hello world'
    }
 },
 methods: {
   ShowMsg() {
     this.isShow = !this.isShow;
     this.isShow == true ? this.msg = '隐藏代码' : this.msg = '显示代码'
   }
 }
}
</script>

<style  scoped>
  .input {
     margin-top: 15px;
  }
   span {
     font-size: 14px;
     display: block;
     height: 50px;
     color:  #409eff ;
     margin-left: 300px;
     opacity: .7;
   }
   span:hover {
     color:  #409eff ;
     opacity: 1;
     cursor: pointer;
   }
   .markdown-body {
     font-size: 17px;
   }
   .box1 {
     width: 1000px;
     margin-top: 20px;
     border: 1px #ccc solid;
     border-radius: 5px;
     padding: 10px 20px;
     box-shadow: 7px 7px 7px -3px rgba(0, 0,0, .2);
   }
</style>

